<template>
  <div class="home-cart">
    <nav-bar title="购物车"
             :left-show="false"
             @rightClick="rightClick"
             :right-text="rightText">
    </nav-bar>
    <div class="cart-content"
         v-if="cartData.length>0">
      <div class="shop-card"
           v-for="(item,i) in cartData"
           :key="item.id">
        <div class="shop-card-top">
          <van-checkbox v-model="item.checked"
                        @change="changeShop(item)"
                        @click="checkShop(item,i)">
          </van-checkbox>
          <van-icon name="shop-o" />
          <span class="shop-top-title">美的旗舰店</span>
          <van-icon name="arrow" />
        </div>
        <div class="good-card"
             v-for="item1 in item"
             :key="item1.id">
          <van-checkbox v-model="item1.checked"
                        @change="changeGood(item1,i)">
          </van-checkbox>
          <img :src="require('@/assets/image/default_img.png')"
               @click="$router.push({path: '/goodsDetail'})"
               alt="">
          <div class="good-info">
            <li class="info-top">
              <span class="text-overflow_2-xzh">商品名称商品名称最多显示两行，多出的
                名称用...表示</span>
              <van-icon name="delete-o"
                        @click="cutOff(item1.id)" />
            </li>
            <span class="good-specif">规格</span>
            <li class="good-shop">
              <span>{{ item1.price }}</span>
              <van-stepper v-model="item1.count"
                           button-size="0.3rem"
                           integer />
            </li>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-footer"
         v-if="cartData.length>0">
      <div>
        <van-checkbox v-model="Allchecked"
                      @click="checkAll" />
        全选
      </div>
      <div>
        <span v-show="!isManage"
              class="footer-price">总计：¥{{ totalPrice }}</span>
        <li v-show="!isManage"
            class="footer-btn"
            @click="settle">结算</li>
        <li v-show="isManage"
            class="footer-btn"
            @click="cutOff">删除</li>
      </div>
    </div>
    <empty v-if="cartData.length == 0"
           style="padding-top:2rem"
           text="购物车空空如也~"></empty>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import Empty from '@/components/Empty'
import preventBack from '@/mixins/preventBack'
export default {
  data () {
    return {
      rightText: '管理',
      Allchecked: false,
      cartData: [
        [
          { id: 1, price: '36', count: 2, checked: false },
          { id: 2, price: '55.33', count: 3, checked: false },
          { id: 3, price: '1999', count: 1, checked: false }
        ],
        [
          { id: 4, price: '3999', count: 1, checked: false },
          { id: 5, price: '23.22', count: 5, checked: false }
        ]
      ],
      totalPrice: 0,
      isManage: false,
      selectData: [],
    };
  },
  components: {
    NavBar,
    Empty
  },
  mixins: [preventBack],
  watch: {
    cartData: {
      handler: function (newVal, oldVal) {
        this.totalPrice = 0
        this.selectData = []
        const data = newVal.flat()
        data.map(item => {
          if (item.checked) {
            this.totalPrice += item.price * item.count
            this.selectData.push(item.id)
          }
        })
      },
      deep: true
    }
  },
  created () {
  },
  methods: {
    rightClick () {
      this.isManage = !this.isManage
      if (this.isManage) {
        this.rightText = '完成'
      } else {
        this.rightText = '管理'
      }
    },
    settle () { },
    cutOff (id) {
      this.$delete(this.cartData[0], 0)
    },
    changeShop () {
      let allCheck = this.cartData.every(val => val.checked)
      this.Allchecked = allCheck
    },
    checkShop (item, i) {
      item.map(val => this.$set(val, 'checked', item.checked))
    },
    changeGood (item, i) {
      let allCheck = this.cartData[i].every(val => val.checked)
      this.$set(this.cartData[i], 'checked', allCheck)
    },
    checkAll (...args) {
      this.mapData(this.cartData, this.Allchecked)
    },
    mapData (val, checked) {
      val.map(item => {
        this.$set(item, 'checked', checked)
        if (item.length > 0) {
          return this.mapData(item, checked)
        }
      })
    }
  }
}

</script>
<style lang='scss'>
.home-cart {
  @extend %wh100;
  @include flex-column;
  justify-content: space-between;
  .van-checkbox__icon--checked .van-icon {
    background-color: #e85014;
    border-color: #e85014;
  }
  .cart-content {
    flex: 1;
    width: 100%;
    background-color: #eeeeee;
    overflow: auto;
    box-sizing: border-box;
    padding: 0.1rem 0.15rem;
    .shop-card {
      background-color: #ffffff;
      border-radius: 0.1rem;
      margin-bottom: 0.15rem;
      .shop-card-top {
        display: flex;
        align-items: center;
        padding: 0.2rem 0 0 0.4rem;
        width: 3rem;
        justify-content: space-around;
        .shop-top-title {
          margin-left: -0.15rem;
          font-size: 0.28rem;
          color: #131415;
        }
        .van-icon {
          font-size: 0.28rem;
        }
      }
      .good-card {
        width: 100%;
        height: 2.2rem;
        box-sizing: border-box;
        padding: 0.2rem 0.33rem 0.2rem 0.2rem;
        display: flex;
        .van-checkbox {
          margin: 0 0.3rem;
        }
        img {
          width: 1.8rem;
          height: 1.8rem;
          margin-right: 0.2rem;
        }
        .good-info {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .info-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .text-overflow_2-xzh {
              font-size: 0.26rem;
              color: #131415;
              margin-right: 0.5rem;
            }
          }
          .good-specif {
            color: #666666;
          }
          .good-shop {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 0.3rem;
              font-weight: 600;
              color: #e01212;
            }
          }
        }
      }
    }
  }
  .cart-footer {
    height: 0.8rem;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 0.25rem;
    div {
      height: 100%;
      display: flex;
      align-items: center;
      color: #666666;
      .van-icon {
        margin-right: 0.15rem;
      }
      .footer-price {
        color: #d92a0d;
        margin-right: 0.2rem;
        font-size: 0.3rem;
      }
      .footer-btn {
        font-size: 0.3rem;
        width: 1.9rem;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        border-radius: 1rem;
        color: #ffffff;
        background: linear-gradient(to right, #ff6828, #ff7f2e);
      }
    }
  }
}
</style>